<template>
  <div>
    <div class="table-tool">
      <el-button v-if="roles.indexOf('area')!==-1||roles.indexOf('admin')!==-1" class="el-button--blue" type="primary" icon="el-icon-download" @click="downloadArea">下载本区</el-button>
      <el-button v-if="roles.indexOf('admin')!==-1" class="el-button--blue" type="primary" icon="el-icon-download" @click="downloadCity">下载本市</el-button>
      <el-button v-if="roles.indexOf('admin')!==-1" class="el-button--blue" type="primary" icon="el-icon-download" @click="downloadProvince">下载本省</el-button>
    </div>
    <el-table ref="table_container" header-align="center" :data="data" stripe :height="tableHeight" v-loading="loading" header-cell-class-name="table-header-cell" cell-class-name="table-cell">
      <el-table-column prop="name" label="学校名称"/>
      <el-table-column prop="provinceCityArea" label="所在省市区"/>
      <el-table-column align="center" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button class="text-button" type="text" icon="el-icon-download" @click="downloadSchool(scope.$index)">下载报告</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { GetReportPackageTable } from '../../../api/table'
import { downloadSchool, downloadArea, downloadCity, downloadProvince, checkSchoolReport, checkAreaReport, checkCityReport, checkProvinceReport } from '../../../api/download'
export default {
  name: 'package',
  data () {
    return {
      loading: false,
      data: [],
      tableHeight: '0px',
      pagination: {
        pageSize: 10,
        currentPage: 1
      },
      total: 0
    }
  },
  mounted () {
    setTimeout(this.reInitTableHeight, 100)
  },
  methods: {
    handleSizeChange (val) {
      this.pagination.pageSize = val
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
    },
    flashTable () {
      this.loading = true
      GetReportPackageTable(this.pagination.pageSize, this.pagination.currentPage).then((res) => {
        this.total = res.data.total
        this.data = res.data.data
        this.loading = false
      })
    },
    downloadSchool (index) {
      checkSchoolReport(this.data[index].id).then((res) => {
        if (res.data.result) {
          downloadSchool(this.data[index].id)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    downloadArea () {
      if ((this.areaId === 0 || typeof this.areaId !== 'number') && this.roles.indexOf('admin') !== -1) {
        this.$message.error('请选择区')
        return
      }
      checkAreaReport().then((res) => {
        if (res.data.result) {
          downloadArea()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    downloadCity () {
      if (this.cityId === 0 || typeof this.cityId !== 'number') {
        this.$message.error('请选择城市')
        return
      }
      checkCityReport().then((res) => {
        if (res.data.result) {
          downloadCity()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    downloadProvince () {
      if (this.provinceId === 0 || typeof this.provinceId !== 'number') {
        this.$message.error('请选择省份')
        return
      }
      checkProvinceReport().then((res) => {
        if (res.data.result) {
          downloadProvince()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    reInitTableHeight () {
      if (document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop < 0) {
        setTimeout(this.reInitTableHeight, 10)
      } else if (document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop <= 500) {
        this.tableHeight = '500px'
      } else {
        this.tableHeight = document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop + 'px'
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles',
      'height',
      'provinceId',
      'cityId',
      'areaId',
      'joinYear',
      'schoolName',
      'schoolId',
      'flash'
    ])
  },
  watch: {
    height: function (val) {
      this.$nextTick(this.$nextTick(this.reInitTableHeight))
    },
    'pagination.currentPage': {
      handler () {
        this.flashTable()
      },
      immediate: true,
      deep: true
    },
    'pagination.pageSize': {
      handler () {
        this.flashTable()
      },
      immediate: true,
      deep: true
    },
    provinceId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    cityId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    joinYear: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    areaId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    schoolName: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    schoolId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    flash: function () {
      this.flashTable()
    }
  }
}
</script>

<style scoped>
  @import "../../../styles/common.css";
  .table-tool {
    width: 100%;
    padding: 15px 10px;
  }
</style>
